@{
  ViewData["Title"] = "商品";
  var productList = ViewBag.ProductList;
  var pb = ViewBag.PageBar;
  var categoryList = ViewBag.CategoryList;
  var key=ViewBag.Key;
  var ids=ViewBag.Ids;
}

<div class="row g-2">
  <div class="col-12">
    <form class="row g-3 d-flex justify-content-center">
      @foreach (var c in categoryList)
      {
        <div class="col-auto ">
          <div class="form-check mt-2 ms-3 position-relative">
            @if(ids.Contains(c.CategoryId))
            {
            <input class="form-check-input check-category" type="checkbox" value="@c.CategoryId" checked>
            }
            else{
              <input class="form-check-input check-category" type="checkbox" value="@c.CategoryId" >
            }
            <label class="form-check-label" for="flexCheckDefault">
              @c.CategoryName
            </label>
            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
              @c.Count
              <span class="visually-hidden">unread messages</span>
            </span>

          </div>

        </div>

      }



      <div class="col-auto">
        <div class="input-group mb-3">
          <input id="input-key" type="text" class="form-control" placeholder="请输入关键字" aria-label="Recipient's username"
            aria-describedby="button-addon2" value=@key>
          <button class="btn btn-outline-primary btn-page" data-page="1" type="button" id="button-addon2">
            <i class="bi bi-search"></i>&nbsp;搜索</button>
        </div>
      </div>


    </form>

  </div>
  @foreach (var p in productList)
  {
    <div class="col-3">
      <div class="card">
        <img src="/upload/@p.Photo" class="card-img-top img-thumbnail" style="height: 180px;" alt="">
        <div class="card-body">
          <h5 class="card-title">@p.ProductName</h5>
          <div class="text-truncate-4" style="height: 95px;">
            <p class="card-text">
              @p.ProductContent
            </p>
          </div>
          <div class="d-flex justify-content-between pt-2">
            <span class="text-danger">$@p.Price</span>
            <button class="btn btn-danger">加入购物车</button>
          </div>
        </div>
      </div>
    </div>
  }
  <div class="col-12">
    <nav aria-label="Page navigation example">
      <ul class="pagination justify-content-end">
        <li class='page-item @(pb.Previous == pb.CurrentPage ? "disabled" : "")'>
          <a class="page-link btn=page" data-page="@pb.Previous" href="javascript:void(0)" aria-label="Previous">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>

        @foreach (var btn in pb.ButtonGroup)
        {

          <li class='page-item @(btn == pb.CurrentPage ? "active" : "")'>
            <a class="page-link btn-page" href="javascript:void(0)" data-page="@btn">
              @btn
            </a>
          </li>
        }
        <li class='page-item @(pb.Next == pb.CurrentPage ? "disabled" : "")'>
          <a class="page-link btn-page" data-page="@pb.Next" href="javascript:void(0)" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>

@section CustomScript{
<script>
  const handlePage=function(){
    let btn=$(this);
    let inputKey=$("#input-key");
    let url=`/product?page=${btn.data("page")}&size=16&key=${inputKey.val()}`;
    $(".check-category:checked").each(function (index, el) {
  let obj = $(el);
  url += `&ids=${obj.val()}`;
 })

 location.href=url;
  }
  
  $(document).ready(function () {
    $(".btn-page").on("click",handlePage);
  });
</script>
}